<template>
  <div class="info">
    <div class="conten">
      <div class="title">
        商品信息

      </div>
      <div class="item">
        <span>图片</span>
        <img :src="$route.query.row.image_url " alt="">
      </div>
      <div class="item">
        <span>编号</span>
        <span>{{gid}}</span>
      </div>
      <div class="item">
        <span>名称</span>
        <el-input type="text" placeholder="请输入名称" v-model='gname' show-word-limit class="text">
        </el-input>
      </div>

      <div class="item">
        <span>价格</span>
        <el-input type="text" placeholder="请输入价格" v-model='price' show-word-limit class="text">
        </el-input>

      </div>
      <div class="item">
        <span>库存</span>
        <el-input type="text" placeholder="请输入库存" v-model="knum" maxlength="20" show-word-limit class="text">
        </el-input>
      </div>
      <div class="item">
        <span>描述</span>
        <el-input type="text" placeholder="请输入内容" v-model="gcontent" show-word-limit class="text">
        </el-input>
      </div>
      <div class="foot">
        <button class="but" @click="update">修改完成</button>
      </div>

    </div>

  </div>
</template>

<script>
import { changegoods } from '@/api/index.js'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      //编号
      gid: '',
      //商品名称
      gname: '',
      //商品价格
      price: '',
      //库存
      knum: '',
      //描述
      gcontent: ''
    }
  },

  methods: {
    //修改完成
    async update() {
      let result = await changegoods({ id: this.gid, name: this.gname, price: this.price, knum: this.knum, gcontent: this.gcontent })

      if (result.data.code == 200) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      }
    }
  },
  mounted() {
    this.gid = this.$route.query.row.goods_id
    this.gname = this.$route.query.row.goods_name
    this.price = this.$route.query.row.price / 100
    this.knum = this.$route.query.row.counts
    this.gcontent = this.$route.query.row.short_name
  }
}
</script>

<style lang='less' scoped>
.info {
  .conten {
    margin: 40px 20%;

    .title {
      font-size: 18px;
      font-weight: 800;
    }
    .item {
      display: flex;
      height: 80px;
      justify-content: space-between;

      margin-top: 10px;
      align-items: center;

      box-shadow: 0 2px 0 0 #323233;

      img {
        width: 80px;
        height: 80px;
        border-radius: 15%;
      }
      span {
        margin-left: 10px;
        font-weight: 800;
      }
      .text {
        width: 40%;
      }
    }
    .foot {
      text-align: center;
      .but {
        margin-top: 20px;
        height: 40px;
        width: 100px;
        background: #323233;
        color: #797992;
      }
    }
  }
}
/deep/.el-select .el-input__inner:focus {
  border-color: #323233;
}
/deep/.el-input__inner:focus {
  border-color: #323233;
}
</style>